<template>
  <div class="exhibition-card">
    <div
      aspectratio
      aspectratio-3-2
      class="exhibition-card__cover mb-16">
      <img
        v-lazy="model.image"
        :alt="model.title"
        aspectratio-content>
    </div>
    <div class="exhibition-card__title mb-16">{{ model.title }}</div>
    <div class="exhibition-card__date"><fa-icon
      :icon="['far', 'clock']"
      class="block mr-8"/>{{ model.date }}</div>
  </div>
</template>

<style lang="scss" scoped>
  .exhibition-card {
    &__cover {
      width: 100%;
      img {
        display: block;
      }
    }
    &__title {
      font-size: 28px;
      color: #343434;
    }
    &__date {
      font-size: 24px;
      color: #B3B3B3;
      display: flex;
      align-items: center;
    }
  }
</style>

<script>
export default {
  props: {
    model: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>
